<template>
  <div id="list">
    <div class="topbig">
            <div class="topleft">
                <van-icon name="arrow-left"  @click="tui()"/>
            </div>
            <div class="topright">
              <van-icon name="star-o" />
              <van-icon name="share-o" />
              <van-icon name="ellipsis" badge="3"/>
            </div>
    </div>

    <div class="swiper">
      
      <van-swipe :loop="false" :width="375">
        <van-swipe-item>
          <img :src="listarr.storeImg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="zhangyifan/imgs/goodlist1.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="zhangyifan/imgs/goodlist3.jpg" alt="">
        </van-swipe-item>
        <van-swipe-item>
          <img src="zhangyifan/imgs/goodlist2.jpg" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <section>
      <h4>{{listarr.storeName}}</h4>
      <div class="one">
        <div class="star">
            <div class="imgs">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
            </div>
            <div class="fen">4.1</div>
            <div class="price">￥{{listarr.storePrice}}/人</div>
        </div>
        <div class="address">
          {{listarr.storeArea}}
        </div>
      </div>

      <div class="two">
        <div class="twoleft">
          <span>环境:4.1</span>
          <span>服务:4.3</span>
          <span>划算:4.0</span>
        </div>
        <div class="twoleft">
          <img src="zhangyifan/imgs/list4.gif" alt="">
          <span>洗浴中心</span>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="three">
        <div>
          <span>营业中</span>
          <span>{{listarr.storeTime}}</span>
          <span>全天</span>
        </div>
        <div>
          <van-icon name="arrow" />
        </div>
      </div>

      <div class="four">
        <div class="fourleft">
          <p>{{listarr.storeIp}}</p>
          <p class="p2">距离秀途广告文化有限公司步行1.3km</p>
        </div>
        <div class="fourrigth">
          <img src="zhangyifan/imgs/list1.gif" alt="">
        </div>
      </div>

      <div class="five">
        <div>
          <span>【全场可用】</span>
          <span>￥20元无门槛优惠券</span>
        </div>
        <div class="linka">
          <a>详情</a>
          <van-icon name="arrow" />
        </div>
      </div>
    </section>


    <main>
      <div class="first">
        <div>
          <img src="zhangyifan/imgs/indexsmall2.gif" alt="">
          <h5>店内服务</h5>
        </div>
        <img src="zhangyifan/imgs/list2.gif" alt="">
      </div>
      <div class="goods">
        <div class="goodsleft">
          <h5>单人洗浴(男女通用)</h5>
          <p>通用  |  周一至周日  24小时可用  |  免预约</p>
          <span>￥39</span>
        </div>
        <router-link to="/xiyucart">
          <div class="goodsright">
            购买
          </div>
        </router-link>
      </div>
      <div class="goods">
        <div class="goodsleft">
          <h5>泡汤+水疗+汗蒸</h5>
          <p>全部  |  周一至周日  24小时可用  |  免预约</p>
          <span>￥97</span>
        </div>
        <div class="goodsright">
          购买
        </div>
      </div>
      <div class="goods">
        <div class="goodsleft">
          <h5>足浴+搓背套餐</h5>
          <p>全部  |  周一至周日  白天场  |  免预约</p>
          <span>￥79</span>
        </div>
        <div class="goodsright">
          购买
        </div>
      </div>
    </main>


    <div class="recommend">
      <div class="recomtop">
        <h5>推荐汤池(2)</h5>
        <van-icon name="arrow" />
      </div>
     <div class="bigbox">
      <div class="recomdown">
        <div class="num1">
          <img src="zhangyifan/imgs/good1.gif" alt="">
          <h6>扬州搓背</h6>
          <p>扬州搓澡手轻劲匀</p>
        </div>
        <div class="num1">
          <img src="zhangyifan/imgs/good2.gif" alt="">
          <h6>温泉洗浴区</h6>
          <p>天然温泉水，多种元素</p>
        </div>
        <div class="num1">
          <img src="zhangyifan/imgs/good3.gif" alt="">
          <h6>天麻温泉汤</h6>
          <p>祛除湿气，平肝益气</p>
        </div>
      </div>
     </div>
    </div>

    <div class="assess">
        <div class="top">
          <h4>评价(1742)</h4>
          <van-icon name="arrow" />
        </div>
        <div class="tag">
          <span>场地好(5)</span>
          <span>高大上(75)</span>
          <span>交通便利(51)</span>
          <span>放松(12)</span>
          <span>技师专业(54)</span>
          <span>服务热情(25)</span>
        </div>
        <div class="user">
            <div class="big">
              <div class="toux">
                <img src="zhangyifan/imgs/1.jpg" alt="">
              </div>
              <div class="zi">
                <div class="one">
                  <div class="id">强力枇杷露</div>
                  <img src="zhangyifan/imgs/vip1.gif" alt="">
                </div>
                <span>发布于 9月9日</span>
                <div class="fen">
                  打分
                  <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                  <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                  <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                  <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                  <img src="zhangyifan/imgs/indexsmall1.gif" alt="">
                </div>
                <p> 太棒了！干净卫生！没有之一！牛！性价比之王！！！！！推荐！！ </p>
              </div>
            </div>
        </div>
        <router-link to="/xiyucomment">
          <div class="down">
          
          <h6>查看全部评价</h6>
          <van-icon name="arrow" />
        </div>
        </router-link>
        
    </div>

    <div class="ask">
      <router-link to="/xiyuask">
        <div class="top">
          <h4>问大家(124)</h4>
          <van-icon name="arrow" />
      </div>
      </router-link>
      <div class="else">
        <div>
          <p>可以汗蒸吗</p>
          <span>10个回答</span>
        </div>
      </div>
      <div class="else">
        <div>
          <p>网吧区域但单独收费吗？</p>
          <span>6个回答</span>
        </div>
      </div>
    </div>



    <div id="ding">END</div>

    <footer>
      <van-tabbar v-model="active" active-color="#ff5f1a" inactive-color="#000">
        <van-tabbar-item icon="location-o">打卡</van-tabbar-item>
        <van-tabbar-item icon="tv-o">拍视频</van-tabbar-item>
        <van-tabbar-item icon="photo-o">传照片</van-tabbar-item>
        <van-tabbar-item icon="edit">写评价</van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import {zListView} from "@/api/zhangyifan.js"
export default {
  data() {
    return {
      active: 0,
      listarr:[]
    };
  },
  methods:{
    tui(){
      this.$router.go(-1)
    }
  },
  created(){
        zListView().then((ok)=>{
            
            // console.log(this.$route.query.val);
            // this.lsitarr=ok.data.data;
            ok.data.data.forEach((v,i) => {
                if(v.storeid==this.$route.query.val){
                  this.listarr=v;
                  console.log(v);
                }
            });
        })
    },
}
</script>

<style scoped lang='scss'>
  #list{
    width: 100%;
    #ding{
      width: 100%;
      height: 26.667vw;
      background-color: #f4f4f4;
      text-align: center;
      padding-top: 5.333vw;
    }
    .topbig{
      display: flex;
      justify-content: space-between;
      width: 95%;
      height: 12.8vw;
      background-color: white;
      font-size: 6.933vw;
      font-weight:900;
      margin: 0 auto;
      line-height:12.8vw;
      .van-icon{
        margin: 1.333vw;
      }
      a{
        color: black;
      }
    }

    .swiper{
      width: 95%;
      height: 52vw;
      margin: 0 auto;
      background-color: skyblue;
      img{
        width: 100%;
        height: 52vw;
      }
    }

    section{
      width: 95%;
      margin: 0 auto;
      h4{
        margin-top: 2.667vw;
      }
      .one{
        display: flex;
        justify-content: space-between;
        height: 5.333vw;
        line-height:5.333vw;
        margin: 1.333vw 0;
        font-size: 3.2vw;
        .star{
          display: flex;
          img{
            margin-right: 0.533vw;
          }
          .fen{
            color:#ff5f1a;
          }
          div{
            margin-right: 1.333vw;
          }
        }
        .address{
          color: gray;
        }
      }
      .two{
        display: flex;
        justify-content: space-between;
        font-size: 3.733vw;
        height: 5.333vw;
        line-height:5.333vw;
      }
      .three{
        display: flex;
        justify-content: space-between;
        height: 16vw;
        line-height:16vw;
        border-top: 0.267vw solid #f4f4f4;
        border-bottom: 0.267vw solid #f4f4f4;
        span{
          margin-right: 2.667vw;
          font-size: 3.733vw;
        }
      }
      .four{
        display: flex;
        justify-content: space-between;
        height: 16vw;
        border-bottom: 2.667vw solid #f5f5f5;
        align-items: center;
        font-size: 3.733vw;
        .p2{
          margin-top: 0.8vw;
          color: gray;
        }
      }
      .five{
        display: flex;
        justify-content: space-between;
        height: 10.667vw;
        line-height:10.667vw;
        border-top: 0.267vw solid #f4f4f4;
        border-bottom: 0.267vw solid #f4f4f4;
        span{
          margin-right: 2.667vw;
          font-size: 3.733vw;
        }
        .linka{
          a{
            color: gray;
            font-size: 3.2vw;
          }
          .van-icon{
            font-size: 3.2vw;
          }

        }
      }
    }

    main{
      width: 95%;
      margin: 0 auto;
      border-bottom: 0.267vw solid #f4f4f4;
      .first{
        width: 100%;
        height:13.333vw;
        display: flex;
        justify-content: space-between;
        border-bottom: 0.267vw solid #f5f5f5;
        align-items: center;
        div{
          display: flex;
          h5{
            width:16vw;
          }
        }
        img{
          height: 4.8vw;
        }
      }
      .goods{
        display: flex;
        height: 16vw;
        justify-content: space-between;
        align-items: center;
        margin: 2.667vw 0;
        .goodsleft{
          p{
            font-size: 3.2vw;
            color: gray;
            margin: 0.8vw 0;
          }
          span{
            color: #ff5f1a;
            font-weight: 700;
          }
        }
        .goodsright{
          width: 13.333vw;
          height: 6.667vw;
          background-color: #ff5f1a;
          color: white;
          border-radius: 4vw;
          text-align: center;
          line-height: 6.667vw;
          font-size: 3.2vw;
        }
      }
    }

    .recommend{
      width: 95%;
      margin: 0 auto;
      border-bottom: 2.667vw solid #f4f4f4;
      
      .recomtop{
          display: flex;
          justify-content: space-between;
          margin: 2.667vw 0;
          width: 100%;
        }
      .bigbox{
        overflow-x: auto;
        .recomdown{
          width: 133.333vw;
          display: flex;
          margin-bottom: 1.333vw;
          p{
            font-size: 3.2vw;
            margin: 1.333vw 0;
          }
        }
      }::-webkit-scrollbar {
                              display:none
                              }
    }

    .assess{
      width: 95%;
      margin: 0 auto;
      // height: 112.8vw;
      
      .top{
        height: 12.267vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .tag{
        width: 100%;
        height: 13.333vw;
        font-size: 3.2vw;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 5.333vw;
        span{
          display: block;
          box-sizing: border-box;
          height: 5.333vw;
          line-height: 5.333vw;
          background-color: #f4f4f4;
          padding:0 1.333vw;
          border-radius: 5.333vw;
          margin:1.333vw;
        }
      }
      .user{
        border-bottom: 0.267vw solid #f4f4f4;
        .big{
          display: flex;
          margin-bottom: 5.333vw;
          .toux{
            img{
              width: 10.667vw;
              height: 10.667vw;
              border-radius: 50%;
            }
          }
          .zi{
            margin: 2.667vw 0 0 2.667vw;
            .one{
              display: flex;
              height: 3.733vw;
              margin: 1.067vw 0;
              .id{
                color: #5c7a96;
              }
            }
            span{
              display: block;
                color: gray;
                font-size: 3.2vw;
                margin: 1.333vw 0;
            }
            .fen{
              font-size: 3.733vw;
              margin-bottom: 1.333vw;
              img{
                margin-left:0.533vw;
              }
            }
          }
        }
      }
      .down{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 9.6vw;
        border-bottom: 1.333vw solid gainsboro;
      }
    }

    .ask{
      width: 95%;
      margin: 0 auto;
      .top{
        height: 12.267vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .else{
        >div{
          display: flex;
          justify-content: space-between;
          margin: 1.333vw 0;
          font-size: 3.733vw;
          span{
            color: gray;
          }
        }
      }
    }
  }
</style>